<template>
  <div class="inout_info">
    <p class="title">
      车场进出实时监测
    </p>
    <div id="lines"></div>
  </div>
</template>

<script>
  let echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/line');

  export default {
    name: 'inout_info',
    props: ['id'],
    data() {
      return {
        inNum: [],
        outNum: []
      }
    },
    mounted() {
      this.getInOutInfo();
    },
    methods: {
      getInOutInfo() {
        this.$axios({
          method: 'get',
          url: '/park/park-info/idc-info-in-out',
          params: {parkId: this.id}
        }).then((res) => {
          console.log(res)
          res.data.forEach(item => {
            this.inNum.push(parseInt(item.in));
            this.outNum.push(parseInt(item.in));
          })
          // this.inNum = this.inNum.slice(6,21);
          // this.outNum = this.outNum.slice(6,21);
          this.inNum = ['15','34','213','184','70','60','134','189','145','50','58','38','67','54','32'];
          this.outNum = ['8','16','54','45','80','110','192','110','80','62','73','216','225','112','82'];
          this.getLineOption()
        })
      },

      getLineOption() {
        let _this = this;
        let myChartLine = echarts.init(document.getElementById('lines'));
        myChartLine.showLoading();
        let lineOption = {
          tooltip: {
            trigger: 'axis'
          },
          color:['#0086FF','#735BAD'],
          legend: {
            x: 'right',
            data: [
              {
                name:'出场',
                textStyle:{
                  fontSize:10,
                  color:'#0086FF'
                },
                icon:'circle'
              },
              {
                name:'入场',
                textStyle:{
                  fontSize:10,
                  color:'#735BAD'
                },
                icon:'circle',
              },
            ],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            top: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            color:'red',
            data: ["06","07","08","09","10","11","12","13","14","15","16","17","18","19","20"],
            axisTick:{ //y轴刻度线
              show:true
            },
            axisLine:{ //x轴
              show:true,
            },
            axisLabel: {
              color:'#ccc',
            },
          },
          yAxis: {
            show: true,
            type: 'value',
            splitNumber:2,
            splitLine:{show: false},   //去除网格线
            nameTextStyle:{
              color:'#abb8ce'
            },
            axisLabel: {
              color:'#0fcce4',
            },
            axisTick:{ //y轴刻度线
              show:false
            },
            axisLine:{ //y轴
              show:true
            }
          },
          series: [
            {
              name: '出场',
              type: 'line',
              smooth: true,
              data: function() {
               return _this.outNum;
              }(),
              symbol: 'none',
              lineStyle:{
                color:'#0086FF',
                width: '3'
              },
              areaStyle: {
                normal: {
                  color: 'rgba(0, 41, 102, 1)'
                }
              }
            },
            {
              name: '入场',
              type: 'line',
              smooth: true,
              data: function() {
                return _this.inNum;
              }(),
              symbol: 'none',
              lineStyle:{
                color:'#735BAD',
                width: '3'
              },
              areaStyle: {
                normal: {
                  color: 'rgba(20, 32, 103, 1)'
                }
              }
            },
          ]
        }
        myChartLine.hideLoading();
        myChartLine.setOption(lineOption);
      }
    }
  }
</script>

<style scoped>
  .inout_info {
    height: 100%;
    padding: 1.4em;
  }
  .title {
    margin: 0;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 0.2rem;
  }
  #lines {
    height: 100%;
    width: 100%;
  }
  .title-icon {
    height: 0.7em;
    margin-right: -3px;
  }
  .iconOne,
  .iconTwo,
  .iconThree {
    animation: enlarge 0.9s infinite;
  }
  .iconTwo {
    animation-delay: 0.3s;
  }
  .iconThree {
    animation-delay: 0.6s;
  }

  @keyframes enlarge {
    0% {transform: scale(1);}
    33.33% {transform: scale(1.3);}
    66.66% {transform: scale(1);}
    100% {transform: scale(1);}
  }

</style>
